<!-- // 歌曲列表组件模块2 -->
<template>
  <div class="wrapper"  @click.once="goSongPlayer()">
    <img v-lazy="img" alt="">
    <div class="content">
      <div class="title">{{title}}</div>
      <div class="artists">{{artists}}</div>
    </div>
    <div class="play">
      <span class="icon iconfont icon-bofang">
        
      </span>
    </div>
  </div>
</template>

<script>
// import {mapGetters, mapMutations, mapActions} from 'vuex'
import {getStyleMusicList} from '@/utils/api/home.js'

  export default {
    name: 'songs-wrapper3',
    data(){
      return {
        img:null,
        title:'',
        artists:'',
        songDetail:null,
        id:null,
      }
    },
    props:{
      song:null
    },
    created(){
      this.getSong()
    },
    methods:{
      goSongPlayer() {
        // util.setLocalData('songDetail',this.song)
        console.log(this.id)
        getStyleMusicList(this.id).then(res=>{
          console.log(res)
          this.songDetail=res.data.result[0].songs[0]
          console.log(this.songDetail)
          // this.insertSong({
          //   song:this.songDetail
          // })
        }).catch(err => {
          console.log(err)
        })
      
        
      },
      getSong(){
        this.img = this.song.picUrl
        this.title = this.song.name
        this.artists = this.song.song.artists[0].name
        this.id = this.song.id
      },
      // ...mapActions([
      //   'insertSong'
      // ])
    }
  }
</script>

<style lang="stylus" scoped>
.wrapper{
  display:flex;
  width:100%;
  height:70px;
  flex-direction:row;
  margin:5px 0;
  img{
    width:70px;
    height:70px;
    border-radius:7px;
    border:1px solid #ccc
  }
  .content{
    width:400px;
    height:100%;
    padding-left:10px;
    .title{
      width:100%;
      height:40px;
      line-height:40px;
      overflow:hidden;
      text-overflow:ellipsis;
      text-align: left;
      white-space:nowrap;
      
    }
    .artists{
      width:100%;
      height: 20px;
      line-height:8px;
      font-size: 14px;
      text-align: left;
    }
  }
  .play{
    height:150px;
    flex:1;
    line-height:150px;
    span{
      font-size:$icon-size-medium-x;
    }
  }
}
</style>
